iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
自我挑戰組

利用 node.js/express 架設網站系列 第 21

Day-21 應用初步規劃以及實作

  • 分享至 

  • xImage
  •  

延續昨天的規劃,我做出了一張心智圖:
https://ithelp.ithome.com.tw/upload/images/20241003/20169465QP9XBcdoQJ.png
把這個商店劃分成了四個區域,今天應該會將商店的基本頁面設計完成,並且會慢慢地增加這些功能上去

商店基本頁面設計

本次的前端我打算使用EJS模板引擎來開發,不過我並沒有什麼想法,因此我又問了chatGPT:
https://ithelp.ithome.com.tw/upload/images/20241003/201694656fmFHg3rL5.png
https://ithelp.ithome.com.tw/upload/images/20241003/20169465TKvkZiwyRd.png
https://ithelp.ithome.com.tw/upload/images/20241003/20169465VPQOnNeLia.png
https://ithelp.ithome.com.tw/upload/images/20241003/201694653TZjEsnf2V.png
https://ithelp.ithome.com.tw/upload/images/20241003/20169465K0z6TRLcXj.png
他直接提供給我了一個EJS模板,接下來我把這些程式碼複製到cursor並啟動之後
https://ithelp.ithome.com.tw/upload/images/20241003/20169465Sj9qSGJ7sH.png
在瀏覽器上觀看的結果長這樣,這樣一來基礎的架構就有了,不過目前所有的功能都集中在同一個頁面,因此我需要將購物車、登入的功能分別放到不同的頁面去:
https://ithelp.ithome.com.tw/upload/images/20241003/20169465jSlheE5Ewu.png
https://ithelp.ithome.com.tw/upload/images/20241003/20169465OI2p4A8YYP.png
https://ithelp.ithome.com.tw/upload/images/20241003/20169465nEdTbC99Gc.png
https://ithelp.ithome.com.tw/upload/images/20241003/20169465oLlsLzCNQ0.png
這樣就成功把分頁製造出來了。明天會開始製作跟購物車相關的功能。


上一篇
Day-20 應用部署與自動化管理以及應用程式設計
下一篇
Day-22 新增購物車功能
系列文
利用 node.js/express 架設網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言